import {
    Popover,
    PopoverContent,
    PopoverTrigger,
} from "@/components/ui/popover"
import { useEffect, useState } from "react"
import { Button } from "@/components/ui/button"
import { ChevronDownIcon } from "@radix-ui/react-icons"
import { columns } from './tree-columns'
import { TreeSelectTable } from "./tree-select-table"
import { TreeItem, ListItem, SelectedItem } from './schema'
import { cn } from '@/lib/utils'
import { Badge } from '@/components/ui/badge'
import { convertStringToTreeSelected, convertTreeSelectedToString } from "@/utils/tree-util"
interface MultiSelectDropdownProps {
    treeItems: TreeItem[]
    listItems: ListItem[]
    defaultValue?: string
    placeholder?: string
    onValueChange?: (value: string) => void
    disabled?: boolean
    className?: string
    isControlled?: boolean
    enableSubSelection?: boolean
    enableMultiRowSelection?: boolean
}

export function TreeSelectDropdown({
    onValueChange,
    treeItems,
    listItems,
    defaultValue,
    placeholder,
    disabled,
    className = '',
    enableSubSelection = true,
    enableMultiRowSelection = true,
}: MultiSelectDropdownProps) {

    const [open, setOpen] = useState(false)

    const [selectedValues, setSelectedValues] = useState<string[]>([])
    const [selectedLabels, setSelectedLabels] = useState<ListItem[]>([])

    const onRowSelectionChange = (value: SelectedItem) => {
        const selectedStr = convertTreeSelectedToString(value)
        setSelectedValues(selectedStr.split(','))
        if (onValueChange) onValueChange(selectedStr)
    }

    useEffect(() => {
        const names = listItems.filter((role: ListItem) => {
            return selectedValues.includes(role.value.toString())
        })
        setSelectedLabels(names)
    }, [selectedValues, listItems])

    useEffect(() => {
        if (defaultValue) setSelectedValues(defaultValue.split(','))
    }, [defaultValue])

    return (
        <Popover open={open} onOpenChange={setOpen}>
            <PopoverTrigger asChild disabled={disabled} className={cn(className)}>
                <Button
                    variant="outline"
                    aria-expanded={open}
                    className=" justify-between"
                >
                    {selectedLabels.length > 0 ? (
                        <div className=" overflow-hidden">
                            {selectedLabels.map((item, idx) => (
                                <Badge variant='outline' key={idx}>
                                    {item.name}
                                </Badge>
                            ))}
                        </div>
                    ) : placeholder}
                    <ChevronDownIcon className="ml-2 h-4 w-4 shrink-0 opacity-50" />
                </Button>
            </PopoverTrigger>
            <PopoverContent className="p-0 ">
                <TreeSelectTable
                    data={treeItems}
                    columns={columns}
                    onValueChange={(value) => onRowSelectionChange(value)}
                    defaultSelected={convertStringToTreeSelected(defaultValue ? defaultValue : '')}
                    enableSubSelection={enableSubSelection}
                    enableMultiRowSelection={enableMultiRowSelection}
                />
            </PopoverContent>
        </Popover>
    )
}